﻿<html>
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="icon" type="image/png" href="https://avatars.githubusercontent.com/u/75709127" />

  <script src="https://unpkg.com/maplibre-gl@1.13.0-rc.4/dist/mapbox-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@1.13.0-rc.4/dist/mapbox-gl.css" rel="stylesheet" />

  <script src="https://unpkg.com/three@0.106.2/build/three.min.js"></script>
  <script src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"></script>

  <link rel="stylesheet" href="../style.css" />

  <style>
    #map {
      position: absolute; 
      top: 5em; 
      right: 0; 
      bottom: 0; 
      left: 0;
      margin: 0;
    }
    h1  {
      background-image: url("https://avatars.githubusercontent.com/u/75709127");
    }
    .b2D,
    .b3D {
      position: fixed;
      bottom: 3.5em;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      width: 100%;
      text-align: center;
      height: 0;
    }
    .b2D.visible,
    .b3D.visible {
      display: block;
    }
    .b3D b {
      transform: scale(1.8) rotate(-45deg);
      display: inline-block;
      margin: .2em .5em;
    }
    .b2D a {
      background: #337ab7;
      padding: .5em;
      color: #fff;
      text-decoration: none;
      top: 1em;
      position: relative;
    }
  </style>

</head>

<body> 
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>MapLibre-GL + Geoportail</h1>
  </a>

  <div id="map"></div>
  <div class="b3D">
    <button onclick="rotate(!rotation)"><b>↶</b> Rotate</button>
    <button onclick="map.setCenter([1.4878665303150522, 48.4478465456651])"><b>↦</b> Chartres</button>
    <button onclick="map.setCenter([2.302271838508859, 49.89451774505622])"><b>↦</b> Amiens</button>
    <button onclick="map.setCenter([4.5235815682583, 47.561461240064546])"><b>↦</b> Bussy</button>
    <button onclick="map.setCenter([-1.213779049957067, 45.99938504729681])"><b>↦</b> Boyard</button>
    <button onclick="map.setCenter([1.2690675412045567, 45.78153467509836])"><b>↦</b> Borrie</button>
    <button onclick="map.setCenter([2.2946113076545354, 48.8581625251])"><b>↦</b> Paris</button>
  </div>
  <div class="b2D">
    <a href="?3D">3D</a>
  </div>
  
<script>

var d3 = (/3D/.test(document.location.search))

// Mapbox map
var map = new mapboxgl.Map({
  container: 'map',
  /*
  style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json',
  style: 'https://wxs.ign.fr/choisirgeoportail/static/vectorTiles/styles/PLAN.IGN/standard.json',
  + add : glyphs = "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf"
  + replace : Source Sans Pro => Open Sans
  */
  style: './standard.json',
  // style: 'https://wxs.ign.fr/parcellaire/static/vectorTiles/styles/PCI/pci.json',
  // style: './pci.json',
  center: d3 ? [2.324, 48.847] : [3, 47],
  zoom: d3 ? 14 : 5,
  pitch: d3 ? 90 : 0,
  antialias: true
});
map.on('load', () => {
/** /
  map.addSource("ortho-source", {
    "type": 'raster',
    "tiles": [
      //"http://localhost:8080/geoserver/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&&version=1.1.1&request=GetMap&srs=EPSG:900913&transparent=true&width=256&height=256&layers=mapbox:roads4326"
      "https://data.geopf.fr/wms-r/wms?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=ORTHOIMAGERY.ORTHOPHOTOS&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&BBOX={bbox-epsg-3857}"
    ],
    'tileSize': 256
  });

  map.addLayer(
    {
      "id": 'ortho-layer',
      "type": 'raster',
      "source": 'ortho-source',
      "paint": {
      }
    }                
  );
/** /
  map.addSource('source-course', {
    'type': 'geojson',
    'data': {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[-1.8230555543671483,46.45138889034328],[-5.035277775757391,45.0463888881288],[-6.608611113449796,45.00305555742591],[-7.9225000017094045,43.869166668830474],[-9.101111115226354,43.50750000054899],[-9.464722219728872,42.53722221942061],[-10.506666664259232,41.99250000252616],[-11.63527777364091,41.493055552685604],[-12.183888888952355,40.622500000693606],[-12.224166669312728,39.54805555522091],[-12.70611111244381,38.49555555525086],[-12.673055553405787,37.302777780772416],[-12.451111113811809,36.143611112231014],[-13.89250000138742,35.294444447524114],[-15.235277774936415,34.41888888631205],[-16.52222222625488,33.62277778071902],[-17.25500000325248,33.14944444286952],[-17.873333329334844,32.3213888869369],[-19.159722226548993,31.731666667815503],[-20.096111112782552,31.096388886062385],[-20.88361111278522,30.66083333666812],[-21.648888885733385,30.116666666954472],[-22.50388888907288,29.181388886606015],[-23.321111114504557,28.475277775592815],[-23.878333336399123,27.90611110791673],[-24.910555557154584,27.32277777990953],[-25.83138889253483,27.10611111346907],[-26.32416666764943,27.236388888002878],[-26.421111110379957,27.30249999857405],[-26.592777777769662,27.32777777764396],[-26.77361111482995,27.3383333318623],[-27.358611113805285,27.038888892264566],[-28.49305555924854,26.67805555728846],[-29.276388885502573,26.404444447105078],[-29.657499998189795,25.912500002601433],[-30.50944444497243,25.641111111300077],[-31.48722221977498,25.25805555170544],[-32.48416666507517,24.887222224019993],[-32.9072222204357,24.28222222105964],[-33.233055556013554,23.656666663223163],[-32.807222221148315,22.982222225325188],[-32.52194444298299,22.159722224993573],[-32.371666662508176,21.374722223535457],[-32.105277777788345,20.540555559360456],[-31.97000000304568,19.85083333649574],[-31.617499998595687,18.858611112890216],[-31.321666665499002,18.27277778143207],[-31.20111111045319,17.626111114859654],[-31.138055557917156,17.01055555849335],[-31.03611111028152,16.426388891505695],[-30.848055551898888,15.628888889877771],[-30.689722218945256,14.023888885013335],[-30.481666667891666,12.33916666396918],[-30.35472222267997,10.70000000388157],[-30.417222221111697,9.19583333595989],[-30.232499996338074,7.759166667168941],[-30.25166666683572,6.906666663071917],[-30.499999998249685,6.6775000004859635],[-30.55416666715044,6.53472222243208],[-30.52055555400811,6.133055556937293],[-30.67750000170096,5.509166662236339],[-30.756111114073462,4.9569444420745725],[-31.085833337364637,3.952500000838583],[-31.540833334571428,2.595555553379995],[-31.99027778175195,1.200833336318027],[-32.325000000965076,-0.1538888857759133],[-32.541944444637096,-1.339444445423851],[-32.62388889061862,-2.4580555580693613],[-32.73249999648914,-3.774722220521028],[-32.833611112968306,-4.920277780165435],[-33.02888889267329,-5.938611107680117],[-33.108333336202264,-7.018611111423041],[-33.19500000105358,-8.510277778621514],[-32.92027777781962,-10.014722221571702],[-32.52611110774848,-11.502777780123026],[-31.741388887250515,-12.890555556669455],[-30.743611110793857,-13.920555555207144],[-29.741388892519556,-14.813055552459346],[-28.42583333296386,-15.884166669407222],[-27.295277775233945,-16.863333337567525],[-26.01055555829903,-17.836388889982402],[-24.61805555766692,-18.73333333152661],[-23.35166667109003,-19.716666662513674],[-21.938611114699498,-20.420555555175582],[-20.67638889288809,-21.418611112958843],[-19.389722218621788,-22.542222224454335],[-18.209722219844057,-23.532500000451293],[-16.903888893046418,-24.358611109340757],[-15.573888890846026,-25.460277780451932],[-14.304722224764431,-26.498611109461272],[-13.035555558682834,-27.418611111785395],[-11.811944445935717,-28.11666666976405],[-10.59416666925017,-28.750277779363678],[-9.450833331188488,-29.73222222221851],[-8.265555559436654,-30.90083333636555],[-6.899166664589223,-32.0186111134574],[-5.615555555862933,-33.152777777079024],[-4.107222219054805,-34.07861110875644],[-2.4336111140060073,-34.98000000001363],[-0.624722225231398,-35.80666666775329],[1.1380555561044214,-36.35083333602477],[2.7997222209610766,-37.159444447929964],[4.500277780917327,-37.64166666487432],[6.121111111309298,-38.10361110846501],[8.00666666410817,-38.40805555724998],[9.871388893079622,-38.507500001359574],[11.506944443168443,-38.33888888904968],[12.68944444439872,-38.762500001166096],[13.469722223079044,-39.803611113762265],[14.768055551502183,-39.848888892314925],[16.141111113567653,-39.75166666708851],[17.703888887345535,-39.250277776892176],[18.99694444279457,-38.90277777838682],[19.768333328856457,-39.7769444446312],[21.460555559281744,-40.4838888902837],[23.034444442095307,-41.123055556583516],[24.636388888024943,-41.95305555711862],[26.489166667821095,-42.22722222268927],[28.067500001435455,-42.8677777807831],[29.718888888412902,-43.41055555707829],[31.188055553069276,-44.15527777963082],[32.898888890904736,-44.7886111091744],[34.35083333341171,-45.539444445609675],[35.78499999966497,-45.93972222097689],[37.64999999670543,-45.565277780351785],[39.71305555295557,-45.3730555524687],[41.80500000347826,-45.21694444550661],[43.710000003826934,-45.130555558655296],[45.81611111095901,-45.22333333054451],[47.95500000007694,-45.31722222449328],[49.89249999637618,-45.4030555572491],[51.20416666821854,-45.33916666424387],[52.34305555547943,-45.222500001562615],[53.020833332419805,-44.949999999395786],[53.551388885442236,-44.62388888935502],[54.50638888806912,-44.909444442038634],[55.68527777863822,-45.05444444525642],[56.042222224905856,-45.07444444438541],[56.64388889192629,-45.12527777653733],[58.25166666493434,-45.41555555678039],[59.883333336292985,-45.91944444498542],[61.694166664432686,-46.42000000009567],[63.441944440036345,-46.82555555376429],[65.25583333371607,-47.23694444228805],[67.00138889290248,-47.57222222137048],[69.20277778045215,-47.80972222166513],[71.07111111110162,-47.87111110927103],[73.34861110857123,-48.18861111212755],[75.7169444446408,-48.52416666876848],[78.06305555365589,-48.92055555550874],[80.27805555269379,-49.398055554599146],[82.64277777810217,-49.71083333217648],[84.96527777480198,-49.83888889110603],[87.15750000166419,-49.86444444701204],[89.2105555570873,-49.7899999984559],[91.20249999933944,-49.259166665952606],[92.74527778044637,-48.468333331947235],[93.95305555630486,-47.85416666560456],[95.35138889299854,-48.06388889113372],[96.21833333653018,-47.40222222039027],[97.73166666926028,-46.733055555154046],[99.48749999734274,-46.08916666689305],[100.98972222103714,-45.43777778059012],[102.32166666260262,-45.58888888846356],[103.54944444011521,-45.83777777909268],[105.46083333062977,-45.1716666656271],[106.90555555181439,-44.73500000138181],[108.32833333197983,-44.66222222354845],[109.77666666382562,-44.200277775282615],[111.49388889182696,-43.98361110976878],[112.89333333672927,-44.18333333120107],[114.8061111125046,-43.79083333138764],[116.75333333257873,-43.45972222340986],[118.5591666647965,-43.02361111362765],[120.36777777651895,-42.52638888679945],[121.99749999952934,-41.80833333366024],[123.25527777952311,-42.77138888827441],[124.60638889158623,-43.76000000268339],[125.97472222579874,-44.825555558003195],[127.17055555248196,-45.885277775292025],[128.70138888441357,-46.44777777774104],[130.44305555588667,-47.0594444436612],[132.03777778049394,-47.522499999299804],[133.69250000108042,-47.888055556505776],[134.68611111277158,-48.15916666889782],[137.36583333279117,-48.81944444182704],[139.12555555757012,-49.52388888874663],[140.49333333767834,-49.58916666956342],[141.85277777927243,-49.633055557076695],[143.16916666998458,-49.5091666691197],[144.05583332913503,-48.6469444443518],[145.8630555555967,-48.988333335872404],[147.67472222387602,-49.386944444821665],[149.30500000099076,-49.78749999726125],[150.48638888502924,-50.00305555422658],[151.82111111508257,-50.83749999857232],[153.0488888925952,-51.359444446548906],[154.6011111114417,-51.50527777686144],[156.17833333684743,-50.834444446046085],[157.83694444514725,-50.04611111081897],[159.6680555519932,-49.62861111278129],[161.1363888854931,-49.73777777845074],[163.19694444827383,-49.83944444652977],[165.470277780978,-49.8677777803428],[167.2166666623377,-49.71888888694438],[168.94972221824452,-50.43805555734354],[170.81694444068538,-51.06611111147838],[172.74194444268815,-51.655277779563455],[174.97500000401504,-52.27416666748066],[176.79055556000773,-52.93583333122804],[178.67305555624975,-53.82638888733625]],[[-179.17611110924355,-54.79000000089495],[-177.0930555513393,-55.50722222357693],[-175.0197222261931,-56.236944446762585],[-172.8536111140987,-56.82305555395205],[-170.70972222007563,-57.116388889664734],[-168.55027777519928,-57.47805555427295],[-166.93666666612964,-57.435000000480485],[-164.791666663898,-57.373611111629494],[-162.70388888712392,-57.38749999974331],[-160.75055555393607,-57.17416666877137],[-158.60277778118285,-56.940555553473246],[-155.81055555859626,-56.55333333422443],[-152.9374999982368,-56.084166668385514],[-150.20277777816003,-55.70638888776244],[-147.4438888916636,-55.2772222197721],[-144.67666666665312,-54.8763888878755],[-141.78888888659677,-54.441666668307306],[-138.90194444668006,-54.105000000259885],[-136.10388888803192,-53.823055556082004],[-133.38583333600022,-53.55222222453335],[-130.69055555614418,-53.438888889075145],[-128.3822222250369,-53.64888888919285],[-126.67222221835793,-54.13916666831818],[-125.12527778146867,-54.515833332432415],[-122.93638888821545,-54.50000000237579],[-120.40777777982717,-54.362777779452614],[-118.05500000359405,-54.42416666668262],[-115.47805555338341,-54.62250000015584],[-113.22416666822907,-54.62638888783109],[-111.12138888572285,-54.46999999788773],[-109.74499999903153,-55.21611110920398],[-108.20027777855951,-56.299722220378484],[-107.32250000304437,-57.343333332998775],[-104.84333333570387,-57.25722222215623],[-102.04138888934239,-57.30861110959488],[-99.22472222328408,-57.377500000377644],[-96.26833333168231,-57.657499998240674],[-93.6002777748027,-57.98666666471465],[-90.40722222391011,-58.170555557165066],[-87.04138888843603,-58.33777777590679],[-83.98333333523394,-58.376666666200265],[-81.26055555534927,-58.11694444637878],[-78.41611111221019,-57.806944446764696],[-75.74833333238274,-57.2727777754913],[-73.23583332895208,-56.9033333335381],[-70.60222222535445,-56.72249999836313],[-68.22472221961429,-56.35472222112604],[-66.47333333334946,-55.84583333323673],[-64.38361110822716,-55.548611109914916],[-61.45250000023676,-55.15499999871334],[-59.022499996891916,-54.6566666665592],[-56.8333333355697,-53.577500002468355],[-55.18055555434833,-52.41027777508162],[-54.68694444807726,-51.27194444319435],[-54.57833333322359,-50.57138888673142],[-54.45555555277739,-50.02111111340397],[-53.96749999653258,-49.473055555017496],[-53.44722222138936,-48.85944444549775],[-52.85472222403953,-48.15194444519009],[-52.31861111200768,-47.51083333410557],[-51.73499999829312,-47.03749999771395],[-51.30222221915769,-46.73833333174813],[-51.08944444025116,-46.50444444406473],[-51.34944444378826,-45.68694444340998],[-51.38944444709647,-44.65416666836003],[-51.503611111976404,-43.60222222091865],[-51.55194444481559,-42.2502777765762],[-51.1774999993464,-40.97111111315461],[-50.89305555233754,-39.910555555944086],[-50.481388892047995,-39.14888888670151],[-49.43555555980431,-38.37638889041156],[-48.016666667352204,-37.94666666796678],[-46.73138888732983,-37.53749999858548],[-45.09472222004923,-37.15361111324377],[-43.78583333669473,-36.73361110963688],[-42.468055551738644,-35.852777780886555],[-40.97499999771482,-34.83277778069703],[-39.30805555988406,-33.880000000792606],[-37.856944448533554,-32.87083333275513],[-36.85750000078081,-32.09972221889976],[-35.841944448070436,-31.421944444441557],[-34.58305555986805,-30.603055557753898],[-33.85416667058378,-29.93777777970893],[-33.45305555624244,-29.449166670335543],[-33.31999999791703,-29.125555555043462],[-33.30722222656842,-28.968611111231546],[-33.270277779817064,-28.731944442258964],[-33.13666666738733,-28.20388888966344],[-33.056111106666584,-27.561666668742305],[-32.97916666559017,-26.982222220470383],[-33.13888889278774,-26.581944444416436],[-33.61694444820548,-25.853055553805333],[-34.25138888822863,-25.12972222261773],[-34.50305555325161,-24.402777780097352],[-34.00583333631937,-23.943611113895088],[-33.17472222234731,-23.033333329727583],[-32.30750000176352,-22.39361110871829],[-31.358055558146045,-21.935555557017167],[-30.49305555397949,-21.5733333349378],[-29.74749999665013,-21.19083333504865],[-29.343888888839395,-20.96861111420833],[-29.50638888655851,-20.742777777919557],[-29.641944447336478,-20.361388885219213],[-29.758888891721117,-19.80027777358542],[-29.861111107425753,-19.24138888850895],[-30.05416667071349,-18.85166667067692],[-30.10861110768325,-18.717777775566248],[-30.012222219057033,-18.29638888830516],[-29.86888889183556,-17.653055558256355],[-29.72527777857878,-16.916944442485175],[-29.65833332934626,-16.142777775233142],[-29.72666666383956,-15.315000002251594],[-29.86944444593987,-14.075000000962959],[-29.928888887814733,-12.723333332573262],[-29.892777781202994,-11.321111108558085],[-29.78305555814071,-9.917222219372135],[-29.63222222356158,-8.486111113536637],[-29.43611111270013,-7.248333337378256],[-28.95194444416865,-5.892499997597639],[-28.36833333045409,-4.552777775793203],[-27.913333333247305,-3.2383333373620076],[-27.5405555590742,-1.667500002447042],[-27.38972222449507,-0.37972222346708406],[-27.223888893166944,0.9683333377303001],[-26.97277778224826,1.9461111116742842],[-26.74694444595781,2.884166665029298],[-26.660555558158645,3.523888892052682],[-26.97277778224826,4.5577777738228065],[-27.468055559815426,5.542500003798182],[-27.88944444387987,6.485555554132617],[-28.285277776263943,7.385277778361555],[-28.798611107136967,8.42472222177048],[-29.492222220965978,9.721111110234844],[-30.085000004351123,10.923055552922463],[-30.61027777541629,12.021111112570466],[-31.031111114359575,13.119166665757703],[-31.506666667324772,14.256111113250867],[-31.797499995516358,15.479722221087684],[-31.819999999623022,16.634722220445994],[-31.742777781494446,17.731111113055604],[-31.70999999950857,18.867222222510307],[-31.718611115074847,19.998888888145643],[-31.526666668978883,20.929722222954254],[-31.25416667114533,21.843888889187156],[-30.921944445401593,22.75694444462532],[-30.561388888472784,23.874444446123476],[-30.26888888898512,24.96888889007805],[-30.03583333137231,25.897777776549262],[-29.869722222992028,26.880277781113193],[-29.491111112757352,28.09388889157843],[-28.893055556398096,29.2108333318904],[-28.151111109729904,30.37583333184844],[-27.555555555823208,31.719444447460006],[-26.880000004283225,33.04305555770573],[-25.969444446782195,34.22388889092721],[-25.00333333511963,35.50555555445622],[-23.932777773368883,36.71000000168448],[-22.856111107487564,37.78666666804858],[-21.911944445827356,39.10222222141158],[-20.780000002836655,40.265000000984315],[-19.433888886695488,41.50388889135988],[-18.119722221383725,42.5230555535405],[-16.90999999717699,43.69333333550014],[-15.435555559546506,44.49805555760122],[-14.008888891667747,45.23805555767629],[-12.362222223560094,45.837222222408855],[-10.548055552828226,46.30027777961138],[-8.488055553134943,46.77750000200862],[-6.76416666689872,47.262499997848806]]]},"properties":{"code":"FRA - FRA 79","rang":"1","nom":"Charlie Dalin - MACIF Santé Prévoyance","heure":"06:30 FR - ","latitude":"47°15.45'N","longitude":"06°45.51'W","30m_cap":"73°","30m_vitesse":"14.6 kts","30m_vmg":"12.9 kts","30m_distance":"7.3 nm","last_rank_cap":"68°","last_rank_vitesse":"19.1 kts","last_rank_vmg":"17.5 kts","last_rank_distance":"76.2 nm","24h_cap":"67°","24h_vitesse":"19.9 kts","24h_vmg":"19.9 kts","24h_distance":"477.4 nm","dtf":"209.3 nm","dtl":"0.0 nm","timestamp":"2025-01-13T06:30:00","skipper":"Charlie Dalin","bateau":"MACIF Santé Prévoyance","latitude_decimal":47.2625,"longitude_decimal":-6.764166666666667}}]}
  });

  map.addLayer({
    'id': 'course',
    'type': 'line',
    'source': 'source-course',
    'paint': {
      'line-color': '#888888',
      'line-width': 2,
    }
  });
/**/
})

// Map rotation
if (d3) document.querySelector('.b3D').className = 'b3D visible';
else document.querySelector('.b2D').className = 'b2D visible';
var start=null, rotation;
function rotateCamera(timestamp) {
  if (!timestamp) {
    start = null;
    requestAnimationFrame(rotateCamera);
    return;
  }
  if (start === null) {
    var rot = map.getBearing();
    start = timestamp - rot*100;
  }
  // clamp the rotation between 0-360 degrees
  // Divide timestamp by 100 to slow rotation to ~10 degrees / sec
  map.rotateTo(((timestamp-start) / 100) % 360, { duration: 0 });
  // Request the next frame of the animation.
  if (rotation) requestAnimationFrame(rotateCamera);
}

function rotate(b) {
  if (b===false) {
    rotation = false;
  } else {
    if (!rotation) {
      rotation = true;
      rotateCamera();
    }
  }
}
map.on('click',function() { rotate(false) });
map.on('wheel',function() { rotate(false) });

// 3D Buildings
map.on('load', function () {
  if (/gpp/.test(document.location.search)) {
    map.addSource('gpp-tiles', {
      'type': 'raster',
      'tiles': [
        'https://wxs.ign.fr/ortho/geoportail/wmts?layer=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}'
      ],
      'tileSize': 256,
      'attribution': 'IGN-Géoservices'
    });
    map.addLayer({
      'id': 'gpp-ortho',
      'type': 'raster',
      'source': 'gpp-tiles',
      'minzoom': 0,
      'maxzoom': 22
    })
  }

  if (d3) {
    // Load bati json to get color style
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var styles = JSON.parse(this.responseText);
        var done = {};
        styles.layers.forEach(function(s) {
          if (s['source-layer'] === "bati_surf" && s.type==='fill') {
            var id = s.id.split('-')[0];
            if (id && !done[id]) {
              done[id] = true;
              s.id = id + ' - 3D';
              s.type = 'fill-extrusion';
              s.filter = ['all', s.filter, [">","hauteur",0]];
              s.minzoom = 14;
              delete s.maxzoom;
              s.paint = {
                "fill-extrusion-color": s.paint['fill-color'],
                "fill-extrusion-height": ["get", "hauteur"],
                "fill-extrusion-base": 0,
                "fill-extrusion-opacity": 0.8
              }
              if (s.paint['fill-extrusion-color']) {
                map.addLayer(s);
              }
            }
          }
        });
      }
    };
    
    ajax.open("GET", "./standard.json", true);

    ajax.send();
    /* One color for all
    map.addLayer({
      "id":"bati 3D",
      "type":"fill-extrusion",
      "source":"plan_ign",
      "source-layer":"bati_surf",
      "minzoom": 14,
      "filter": [">","hauteur",0],
      "layout":{"visibility":"visible"},
      "paint":{
        "fill-extrusion-color": "#aaa",
        "fill-extrusion-height": ["get", "hauteur"],
        "fill-extrusion-base": 0,
        "fill-extrusion-opacity": 0.8
      }
    });
    */
  }
});


/* 3D Model */
function add3DModel (name, modelOrigin, modelRotate, modelScale, modelAltitude) {

  var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
    modelOrigin,
    modelAltitude || 0
  );
  
  // transformation parameters to position, rotate and scale the 3D model onto the map
  var modelTransform = {
    translateX: modelAsMercatorCoordinate.x,
    translateY: modelAsMercatorCoordinate.y,
    translateZ: modelAsMercatorCoordinate.z,
    rotateX: modelRotate[0],
    rotateY: modelRotate[1],
    rotateZ: modelRotate[2],
    /* Since our 3D model is in real world meters, a scale transform needs to be
    * applied since the CustomLayerInterface expects units in MercatorCoordinates.
    */
    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() * modelScale
  };
  
  var THREE = window.THREE;
  
  // configuration of the custom layer for a 3D model per the CustomLayerInterface
  var customLayer = {
    id: '3d-model-'+name,
    type: 'custom',
    renderingMode: '3d',
    onAdd: function (map, gl) {
      this.camera = new THREE.Camera();
      this.scene = new THREE.Scene();
      
      // create two three.js lights to illuminate the model
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(0, 1, 0).normalize();
      this.scene.add(directionalLight);

      var directionalLight2 = new THREE.DirectionalLight(0xffffff);
      directionalLight2.position.set(0, -1, 0).normalize();
      this.scene.add(directionalLight2);

      var directionalLight3 = new THREE.DirectionalLight(0xffffff);
      directionalLight3.position.set(1, 0, 1).normalize();
      this.scene.add(directionalLight3);

      var directionalLight4 = new THREE.DirectionalLight(0xeeeeee);
      directionalLight4.position.set(-1, 0, -.5).normalize();
      this.scene.add(directionalLight4);

      // use the three.js GLTF loader to add the 3D model to the three.js scene
      var loader = new THREE.GLTFLoader();
      loader.load(
        './'+name+'/scene.gltf',
        function (gltf) {
          this.scene.add(gltf.scene);
        }.bind(this)
      );
      this.map = map;
  
      // use the Mapbox GL JS map canvas for three.js
      this.renderer = new THREE.WebGLRenderer({
        canvas: map.getCanvas(),
        context: gl,
        antialias: true
      });
    
      this.renderer.autoClear = false;
    },
    render: function (gl, matrix) {
      var rotationX = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(1, 0, 0),
        modelTransform.rotateX
      );
      var rotationY = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(0, 1, 0),
        modelTransform.rotateY
      );
      var rotationZ = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(0, 0, 1),
        modelTransform.rotateZ
      );
    
      var m = new THREE.Matrix4().fromArray(matrix);
      var l = new THREE.Matrix4()
        .makeTranslation(
          modelTransform.translateX,
          modelTransform.translateY,
          modelTransform.translateZ
        )
        .scale(
          new THREE.Vector3(
            modelTransform.scale,
            -modelTransform.scale,
            modelTransform.scale
          )
        )
        .multiply(rotationX)
        .multiply(rotationY)
        .multiply(rotationZ);
    
      this.camera.projectionMatrix = m.multiply(l);
      this.renderer.state.reset();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
    }
  };

  map.on('style.load', function () {
    map.addLayer(customLayer);
  });
}

map.setCenter([2.329482647421081, 48.867454200543165])
map.setZoom(16)
// parameters to ensure the model is georeferenced correctly on the map
// add3DModel('eiffel_tower', [2.2944896899799634, 48.85826252188846], [Math.PI / 2, Math.PI / 4, 0], 2.8 )
add3DModel('eiffel_tower', [2.294459855651654, 48.85824232475784], [Math.PI / 2, 0, 0], 1.1 )
// add3DModel('arche', [2.2357847603874803, 48.892606204283226], [Math.PI / 2, .05, 0], 1.1 )
add3DModel('arche', [2.2360603428345245, 48.89269253586659], [Math.PI / 2, .01, 0], 1.05 )
add3DModel('vendome', [2.329482647421081, 48.867454200543165], [Math.PI / 2, 0.05, 0], 1.1 )
add3DModel('triomphe', [2.2951802632238634, 48.873866580329434], [Math.PI / 2, 0, 0], 1.05 )
add3DModel('pompidou', [2.352630112094751, 48.86051032864336], [Math.PI / 2, 0.03, 0], 1, 5)
add3DModel('pantheon', [2.3460668702475336, 48.84614243277852], [Math.PI / 2, 0, 0], .95 )
add3DModel('pyramid', [2.3358513575402458, 48.861008625150845], [Math.PI / 2, 4.34, 0], 1.1 )
add3DModel('louvre', [2.3328678003637155, 48.86172059175101], [Math.PI / 2, 0, 0], 1.2, -5 )
add3DModel('notre_dame', [2.349701118570193, 48.853114650748665], [0, 0, 4.25], .65 )
add3DModel('boyard', [-1.213779049957067, 45.99938504729681], [Math.PI / 2, 0.05, 0], 1.1 )
add3DModel('chartres', [1.4878665303150522, 48.4478465456651], [Math.PI / 2, Math.PI / 4, 0], .026 )
add3DModel('bussy', [4.5235815682583, 47.561461240064546], [Math.PI / 2, -.03, 0], 1, -1.5 )
add3DModel('borrie', [1.2690675412045567, 45.78153467509836], [Math.PI / 2, .05, 0], 1, 0 )
add3DModel('amiens', [2.302271838508859, 49.89451774505622], [Math.PI / 2, .05, 0], 1.05, -2 )
add3DModel('vincennes', [2.434727693750097, 48.84263156699075], [Math.PI / 2, 0, 0], 1, 3 )

</script>
</body>
</html>